<template>
    <div style="background-color: #f4f7fa;">
        <div class="search-container"  v-if="isShow">
            <el-collapse-transition>
                <div v-show="searchShow">
                    <div class="warehouse">
                        <p class="title">待受理的保税报关申请</p>
                        <div class="warehouse-container flex">
                            <div class="warehouse-item" :class="'warehouse-item__checked'">
                                <p class="flex" style="margin-bottom: 5px;">
                                    <span style="font-weight: 700;font-size: 16px;">全部</span>
                                </p>
                                <p class="flex" style="justify-content: space-between; align-items: center;">
                                    <span style="color: rgba(0, 0, 0, 0.35);">报关单数 | 柜数</span>
                                    <span style="font-weight: 700;font-size: 16px;">{{ this.CustomsStatisticDataList.inOrderNum ? (this.CustomsStatisticDataList.inOrderNum + this.CustomsStatisticDataList.outOrderNum) : 0 }} | {{ this.CustomsStatisticDataList.inContainerNum ? (this.CustomsStatisticDataList.inContainerNum + this.CustomsStatisticDataList.outContainerNum) : 0 }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="stock" style="margin-top: 25px; position: relative;">
                        <div id="mat-container" class="warehouse-container flex" style="width: 100%; position: relative;overflow-x: auto">
                            <div class="warehouse-item" :class="planStatus == 1 ? ' warehouse-item__checked' : 'warehouse-item__not-checked'" style="height: 100px; padding-bottom: 10px"  @click="matClick(1)">
                                <p style="height: 31px; text-overflow: ellipsis;font-weight: 700;font-size: 16px;overflow: hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;">
                                    保税入库
                                </p>
                                <p class="flex" style="justify-content: space-between;align-items: center;">
                                    <span style="color: rgba(0, 0, 0, 0.35);">报关单数 | 柜数</span>
                                    <span style="font-weight: 700;font-size: 16px;">{{ this.CustomsStatisticDataList.inOrderNum }} | {{ this.CustomsStatisticDataList.inContainerNum }}</span>
                                </p>
                            </div>
                            <div class="warehouse-item" :class="planStatus == 2 ? ' warehouse-item__checked' : 'warehouse-item__not-checked'" style="height: 100px; padding-bottom: 10px" @click="matClick(2)">
                                <p style="height: 31px; text-overflow: ellipsis;font-weight: 700;font-size: 16px;overflow: hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;">
                                    保税出库
                                </p>
                                <p class="flex" style="justify-content: space-between;align-items: center;">
                                    <span style="color: rgba(0, 0, 0, 0.35);">报关单数 | 柜数</span>
                                    <span style="font-weight: 700;font-size: 16px;">{{ this.CustomsStatisticDataList.outOrderNum }} | {{ this.CustomsStatisticDataList.outContainerNum }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </el-collapse-transition>
            <div class="bottom-btn" @click="searchShow = !searchShow">
                <Icon type="ios-menu" class="ios-menu" />
            </div>
            <div class="bottom-btn2" style="left: calc(50% - 1px)">
            </div>
        </div>
        <div class="content-container" style="height: auto;" v-if="isShow && searchManageCompanyCode">
            <div class="nav-tab" v-if="wareSelected.length > 0">
                <!-- <Menu ref="wareMenu" mode="horizontal" style="font-weight: 700;color:#000;padding: 0 30px; height: 70px" :active-name="menuActiveName" @on-select="menuSelect"> -->
                <Menu ref="wareMenu" mode="horizontal" style="font-weight: 700;color:#000;padding: 0 30px; height: 70px" :active-name="this.menuActiveName">
                    <MenuItem v-for="(item, index) in wareSelected" :key="index" :name="item.id">
                        <p style="height: 20px"> 上海 </p>
                        <p style="height: 20px"> ( {{ item.boxNum}} 单)</p>
                    </MenuItem>
                </Menu>
            </div>
        </div>
        <div style="padding-right: 30px;margin:20px 50px 5px" v-if="searchManageCompanyCode">
            <Form :label-width="100">
                <Row type="flex" align="middle">
                    <Col span="6">
                        <Input v-model="tableData.searchKey" placeholder="请输入提单号、箱号、关联报关单编号查询" style="width: 300px;" size="small" @on-enter="getSelectList"></Input>
                    </Col>
                    <Col span="6">
                        <FormItem label="申请状态：" style="margin-bottom: 0; margin: 0 10px">
                            <Select v-model="tableData.applyStatus" multiple style="width:200px" size="small">
                                <Option v-for="item in applicationStatusList" :value="item.lcatValue" :key="item.lcatValue">{{ item.lcatName }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="4">
                        <Button style="width: 60px;background-color: rgba(79, 104, 232, 1); color:#fff; margin-left: 10px" size="small" @click="getSelectList">查询</Button>
                        <Button style="width: 60px;background-color: rgba(79, 104, 232, 1); color:#fff; margin-left: 10px" size="small" @click="resetGet">重置</Button>
                        <Button style="width: 60px;background-color: rgba(79, 104, 232, 1); color:#fff; margin-left: 10px" size="small" type="primary" @click="AddBondedWarehousingInfo">新增</Button>
                    </Col>
                </Row>
            </Form>
        </div>

        <div class="content" style="height: calc(100vh - 230px);overflow: auto;" v-loading="tableData.loading" v-if="searchManageCompanyCode">
            <template>
                <Card v-for="(item, index) in tableData.list" :key="index" style="margin: 10px 20px;" v-loading="tableData.loading">
                    <div v-if = "applicationStatusList.filter(a => a.lcatValue == item.applyStatus)[0]">
                        <div v-if="applicationStatusList.filter(a => a.lcatValue == item.applyStatus)[0].lcatName === '草稿'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(69,200,50);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                            草稿
                        </div>
                        <div v-if="applicationStatusList.filter(a => a.lcatValue == item.applyStatus)[0].lcatName === '已提交'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(121,138,255);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                            提交
                        </div>
                        <div v-if="applicationStatusList.filter(a => a.lcatValue == item.applyStatus)[0].lcatName === '驳回'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(255,50,50);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                            驳回
                        </div>
                        <div v-if="applicationStatusList.filter(a => a.lcatValue == item.applyStatus)[0].lcatName === '已受理'" style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(15,178,215);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                            已受理
                        </div>
                    </div>
                    <div>
                        <div slot="title">
                            <Row style="padding-left: 4px">
                                <i-col :span="5">
                                    <span style="font-weight: 700; font-size: 13px;">提单号：{{ item.billOfLandingNo }}</span>
                                </i-col>
                                <i-col :span="5" style="font-weight: 700;">
                                    <p>到港日期：{{ $utils.timestampToDate(item.arrivalDate) }}</p>
                                </i-col>
                                <!-- <i-col :span="3" style="font-weight: 700;">
                                    <span>送货车号：</span>
                                    <span>{{ item.carNo }}</span>
                                </i-col> -->
                                <i-col :span="4" style="font-weight: 700;">
                                    <p>毛重：{{ item.grossWt }}</p>
                                </i-col>
                                <i-col :span="4" style="font-weight: 700;">
                                    <p>进出境关别：{{ item.impexpPortcdName }}</p>
                                </i-col>
                                <i-col :span="4" style="font-weight: 700;">
                                    <p>报关状态：{{(item.customsStatus == 1 ? '未报关' : '已报关')}}</p>
                                </i-col>
                            </Row>
                        </div>
                        <hr style="margin: 15px 0">
                        <Row style="margin-bottom: 40px">
                            <i-col :span="5">
                                <span class="font-bold">货主：</span>
                                <span class="font-bold">{{ item.cargoOwnerName }} </span>

                            </i-col>
                            <i-col :span="5">
                                <span class="font-bold">结算客户：</span>
                                <span class="font-bold">{{ item.settlementCustomerName == $utils.getUserInfo().entrustingPartyName ? 'Y' : 'N' }}</span>

                            </i-col>
                            <i-col :span="4">
                                <span class="font-bold">境内目的地：</span>
                                <span class="font-bold">{{ item.districtCodeName }}</span>
                            </i-col>
                            <i-col :span="4" >
                                <span class="font-bold">关联报关单编号：</span>
                                <span class="font-bold">{{ item.rltEntryNo }}</span>
                            </i-col>
                            <i-col :span="4" >
                                <span class="font-bold">附件数：</span>
                                <span class="font-bold">{{ fileNumList[index] }}</span>
                            </i-col>
                            <!-- <i-col :span="4" >
                                <span class="font-bold">提发货凭证编号：</span>
                                <span class="font-bold">{{ item.whRecPreentNo }}</span>
                            </i-col> -->
                            <i-col v-if="!(fileNumList[index] == 0 && item.planOrderNumList.length == 0)" :span="1" style="position:absolute; right: 0; margin-right:34px; margin-top: 20px; top: 20px">
                                <Dropdown>
                                        <a href="javascript:void(0)" style="color: #4F68E8;">
                                            查看
                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                        </a>
                                        <DropdownMenu slot="list">
                                            <DropdownItem class="font-bold" @click.native.stop="getViewInfo(item)" v-if="fileNumList[index] > 0">查看附件</DropdownItem>
                                            <DropdownItem class="font-bold" @click.native.stop="lookInfo(item)" v-if="item.planOrderNumList.length > 0">查看计划</DropdownItem>
                                        </DropdownMenu>
                                    </Dropdown>
                                <!-- <el-button class="colorInfo" type="text" @click="getViewInfo(item)">查看附件</el-button> -->
                            </i-col>
                            <i-col :span="1" style="position:absolute; right: 0; margin-right:55px; margin-top: 20px; top: -15px">
                                <el-button type="text" @click="inPlanInfoD(item,'in')"><span class="colorInfo"> {{ !item.dtailInfo ? '展开详情': '收起详情' }}  </span><i class="colorInfo" :class="!item.dtailInfo ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"></i> </el-button>
                            </i-col>
                        </Row>
                        <div style="position:absolute;right:0px;margin-right:58px; top: 60px;">
                                    <Dropdown  v-if="item.id !== null && (item.applyStatus == '0' || item.applyStatus == '2')" :placement="top-end">
                                        <a href="javascript:void(0)" style="color: #4F68E8;">
                                            操作
                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                        </a>
                                        <DropdownMenu slot="list">
                                            <DropdownItem class="font-bold" @click.native.stop="EditInfo(item)">编辑</DropdownItem>
                                            <DropdownItem class="font-bold" @click.native.stop="submitInfo(item)">提交</DropdownItem>
                                            <DropdownItem class="font-bold" @click.native.stop="delectInfo(item)">删除</DropdownItem>
                                        </DropdownMenu>
                                    </Dropdown>
                                </div>
                        <div v-if="item.dtailInfo" style="margin-bottom:15px">
                            <p slot="header">进度详情</p> <br>
                            <div style="padding:10px">
                                <el-steps :active="item.applyStatus == 0 ? 1 : item.applyStatus == 1 ? 2 : item.applyStatus == 3 ? 3 : item.applyStatus == 2 ? 1 : timestampToDateHour">
                                    <el-step :title="'报关申请单已创建'" :description="(item.customsDeclareApplyTime ? $utils.timestampToDateTime(item.customsDeclareApplyTime) : '') + (item.createUser ? '-' : '')  + (item.createUser ? item.createUser : '')"></el-step>
                                    <el-step :title="'报关申请单已提交'" :description="(item.customsDeclarePushTime ? $utils.timestampToDateTime(item.customsDeclarePushTime) : '') + (item.updateUser ? '-' : '')  + ' ' + (item.updateUser ? item.updateUser : '')  "></el-step>
                                    <el-step :title="'报关计划已创建'" :description="(item.customsDeclareCreateTime ? $utils.timestampToDateTime(item.customsDeclareCreateTime) : '') + (item.customsCreateUser ? '-' : '')  +  ' ' + (item.customsCreateUser ? item.customsCreateUser : '')"></el-step>
                                </el-steps>
                            </div>
                        </div>
                        <Row v-if="item.dtailInfo">
                            <Row style="margin-bottom: 10px" v-for="(goods,index) in item.businessDetailList" :key="index">
                                <el-card style="margin: 10px 0;padding: 0 0 15px;background-color: #F4F8FA">
                                    <i-col :span="1">
                                        <el-button type="text" @click.stop="goods.dtailInfoGoods = !goods.dtailInfoGoods" style="z-index:99"><span class="colorInfo"></span><i class="colorInfo" :class="!goods.dtailInfoGoods ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"></i> </el-button>
                                    </i-col>
                                    <i-col :span="4">
                                        <span>集装箱号：</span>
                                        <span>{{ goods.containerNum }}</span>
                                    </i-col>
                                    <i-col :span="4">
                                        <span>件数：</span>
                                        {{ goods.orderQty }}
                                    </i-col>
                                    <i-col :span="4">
                                        <span>毛重：</span>
                                        {{ goods.grossWt }}
                                    </i-col>
                                    <i-col :span="4">
                                        <span>净重：</span>
                                        {{ goods.netWt }}
                                    </i-col>
                                    <i-col :span="4">
                                        <span>币制：</span>
                                        {{ goods.dclCurrcd }}
                                    </i-col>
                                    <i-col :span="4">
                                        <span>单价：</span>
                                        {{ goods.dclUprcAmt }}
                                    </i-col>
                                    <i-col :span="4">
                                        <span>总价：</span>
                                        {{ goods.dclTotalAmt }}
                                    </i-col>
                                    <i-col :span="4">
                                        <span>送货车号：{{ goods.carNo }} </span>
                                    </i-col>
                                    <i-col :span="4">
                                        <span>送货司机姓名：{{ goods.driver }} </span>
                                    </i-col>
                                    <i-col :span="4">
                                        <span>送货司机联系方式：{{ goods.tel }} </span>
                                    </i-col>
                                </el-card>
                                <Row v-if="goods.dtailInfoGoods">
                                    <Row style="margin-bottom: 10px" v-for="(goodsM,index) in item.matCodeDetailList" :key="index">
                                        <el-card v-if="goodsM.containerNum == goods.containerNum && goodsM.deleteFlag == false" style="margin: 10px 25px;padding: 0 0 15px;background-color: #F4F8FA">
                                            <i-col :span="4">
                                                <span>商品料号：</span>
                                                <span>{{ goodsM.matCode }}</span>
                                            </i-col>
                                            <i-col :span="4">
                                                <span>品名：</span>
                                                {{ goodsM.matName }}
                                            </i-col>
                                            <i-col :span="4">
                                                <span>厂号：</span>
                                                {{ goodsM.factoryCode }}
                                            </i-col>
                                            <i-col :span="4">
                                                <span>件数：</span>
                                                {{ goodsM.orderQty }}
                                            </i-col>
                                            <i-col :span="4">
                                                <span>申报数量：</span>
                                                {{ goodsM.dclQty }} {{ goodsM.dclUnitcdName }}
                                            </i-col>
                                            <i-col :span="4">
                                                <span>法定第一数量：</span>
                                                {{ goodsM.legalDclQty }} {{ goodsM.legalDclUnitcdName }}
                                            </i-col>
                                            <i-col :span="4">
                                                <span>毛重：</span>
                                                {{ goodsM.grossWt }}
                                            </i-col>
                                            <i-col :span="4">
                                                <span>净重：{{ goodsM.netWt }} </span>
                                            </i-col>
                                            <i-col :span="4">
                                                <span>是否抄码：{{ goodsM.ifCodeReading == 1 ? 'Y' : 'N' }} </span>
                                            </i-col>
                                            <i-col :span="4">
                                                <span>商品编码：{{ goodsM.hscode }} </span>
                                            </i-col>
                                            <!-- <i-col :span="4">
                                                <span>商品ID：{{ goodsM.id }} </span>
                                            </i-col> -->
                                            <i-col :span="4">
                                                <span>规格型号：{{ goodsM.packFormat}} </span>
                                            </i-col>
                                            <i-col :span="4">
                                                <span>生产日期：{{ goodsM.dateGen ? $utils.timestampToDate(goodsM.dateGen) : '' }} </span>
                                            </i-col>
                                            <i-col :span="4">
                                                <span>原产国：</span>
                                                <span>{{ goodsM.countryName }} </span>
                                            </i-col>
                                        </el-card>
                                    </Row>
                                </Row>
                            </Row>
                        </Row>
                    </div>
                    <el-dialog :visible.sync="dialogTableVisible" :title="dialogTableTitle" width="65%">
                        <Row>
                            <Form :model="attachmentItem" :label-width="50">
                                <i-col :span="14">
                                    <FormItem :label-width="0">
                                        <el-button type="primary" size="mini" @click="downloadFile" :loading="attachmentLoading">下载</el-button>
                                    </FormItem>
                                </i-col>
                                <i-col :span="5">
                                    <FormItem label="关键字">
                                        <el-input v-model="attachmentItem.searchKey" placeholder="文件名称查询" size="mini" style="width: 100%;" clearable @change="getViewInfo(searchItem)"></el-input>
                                    </FormItem>
                                </i-col>
                                <i-col :span="5">
                                    <FormItem>
                                        <el-button type="primary" size="mini" @click="getViewInfo(searchItem)">查询</el-button>
                                        <el-button type="primary" size="mini" @click="resetAttachment(searchItem)">重置</el-button>
                                    </FormItem>
                                </i-col>
                            </Form>
                        </Row>
                        <el-table :data="pageData.list"
                                v-loading="pageData.loading"
                                @selection-change="handleSelectionChange">
                            <el-table-column
                                type="selection"
                                width="36">
                            </el-table-column>
                            <el-table-column
                                label="序号"
                                type="index"
                                width="50"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                v-for="(item, key) in column" :key="key"
                                :prop="item.key"
                                :label="item.title"
                                :min-width="item.width"
                                align="center"
                                :sortable="item.sortable"
                                :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <template v-if="item.type !== 'template'">
                                        {{$table.tableRowFormat(scope.row, item)}}
                                    </template>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="100" fixed="right">
                                <template slot-scope="scope">
                                <a @click="lookFile(scope.row)"><span style="color: #4f68e8">预览</span></a>
                                </template>
                            </el-table-column>
                        </el-table>
                        <br>
                        <Row class="margin-top-10">
                            <Page :total="pageData.total" :current="pageData.pageNum" :page-size="pageData.pageSize"
                                :page-size-opts="pageData.pageOptionsList"
                                size="small" @on-change="attachmentPageChange" @on-page-size-change="attachmentPageSizeChange" show-elevator
                                show-sizer></Page>
                        </Row>
                    </el-dialog>
                </Card>
            </template>
        </div>
        <div style="width: 100%; display: flex; justify-content: end;padding-top: 10px;" v-if="searchManageCompanyCode">
            <Page :total="tableData.total" :current="tableData.pageNum" :page-size="tableData.pageSize" :page-size-opts="tableData.pageOptionsList"
                    @on-change="pageChange" @on-page-size-change="pageSizeChange" show-sizer show-total></Page>
        </div>
        <PdfViewModal ref="pdfViewModal" v-if="searchManageCompanyCode"></PdfViewModal>
    </div>
</template>

<script>

import { getAllWareList} from '@/api/warehouse/home.js';
import { selectList, getByCodeTableTypeList, deleteById, updateApplyStatus, getFileList, customerDownload, getCustomsStatisticData, selectBoxNumPage, selectByCustomerType} from '@/api/bondedWarehous'
import PdfViewModal from '@/components/pdfViewModal/pdfViewModal';
import fileDownload from 'js-file-download';
import _ from 'lodash'

export default {
    name: 'bondedWarehousing',
    components: {
        PdfViewModal
    },
    data() {
        return {
            isShow: true,
            wareAllChecked: false,
            wareList: [],
            searchShow: true,
            wareSelected: [{
                boxNum: '',
                id: 36
            }],
            customerTypeList: [],
            searchManageCompanyCode: '',
            menuActiveName: 36,
            planStatus: 1,
            tableData: {
                filterList: [],
                pageNum: 1,
                pageSize: 10,
                searchKey: '',
                sortList: [],
                list: [],
                total: 0,
                loading: false,
                pageOptionsList: [10, 20, 30, 40],
                searchOrderStatusList: null,
                applyStatus: []
            },
            applicationStatusList: [
                {
                    lcatName: '草稿',
                    lcatValue: 0
                },
                {
                    lcatName: '已提交',
                    lcatValue: 1
                },
                {
                    lcatName: '驳回',
                    lcatValue: 2
                },
                {
                    lcatName: '已受理',
                    lcatValue: 3
                }
            ],
            wmsUrl: '',
            unitList: [],
            // 币制
            tradeCurrList: [],
            countryCodeList: [],
            attachmentItem: {
                searchKey: '',
                searchOrderType: null
            },
            dialogTableVisible: false,
            dialogTableTitle: '',
            attachmentLoading: false,
            column: [
                {
                    key: 'displayName',
                    title: '文件名称',
                    width: 140
                },
                {
                    key: 'createdDate',
                    title: '创建时间',
                    width: 100,
                    type: 'date'
                },
                {
                    key: 'remark',
                    title: '备注',
                    width: 140
                },
            ],
            pageData: {
                loading: false,
                list: [],
                pageNum: 1,
                pageSize: 10,
                total: 0,
                pageOptionsList: [10, 20, 30, 40]
            },
            fileNumList: [],
            selectFile: [],
            applyTypeList: ['move', 'in'],
            searchItem: {},
            customCodeList: [],
            disrictCodeList: [],
            CustomsStatisticDataList: {
                inContainerNum: 0,
                inOrderNum: 0,
                outContainerNum: 0,
                outOrderNum: 0
            }
        };
    },
    methods: {
        lookFile(row) {
            let suffix = row.fileName.split('.')[1].toLowerCase();
            if (suffix != 'pdf' && suffix != 'png' && suffix != 'jpg' && suffix != 'jpeg') {
                this.$message.warning('不能预览非PDF、png、jpg、jpeg格式的文件');
                return;
            }
            this.$refs.pdfViewModal.loadFile(row, 36);
        },
        downloadFile() {
            let body = [];
            this.selectFile.forEach(item => {
                body.push({
                    id: item.id ? item.id : '',
                    customerCode: "",
                    businessNum: "", //申请id
                    businessType: "50",
                    fileName: item.fileName,
                    fileUrl: item.fileUrl,
                    remark: null,
                    createdBy: "",
                    createdDate: "",
                    lastModifiedBy: "",
                    lastModifiedTime: "",
                    deleteFlag: 0,
                    fileSource: "W",
                    businessItem: null,
                    fileType: "5", //报关计划申请，货转申请传
                    fileTypeList: null,
                    minioObjectName: null,
                    displayName: "",
                    fileTypeName: "",
                    fileSuffix: "",
                    fileSuffixEdit: "",
                    shortFileName: ""
                })
            });
            customerDownload(body[0], this.wmsUrl).then(({data}) => {
                fileDownload(data, 'EDOC' + body[0].fileName.split(',')[0].toLowerCase())
            });
        },
        resetAttachment(item) {
            this.attachmentItem.searchKey = '';
            this.getViewInfo(item)
        },
        handleSelectionChange(selection) {
            this.selectFile = selection;
        },
        attachmentPageChange(pageSize) {
            this.tableData.pageSize = pageSize;
            this.getViewInfo();
        },
        attachmentPageSizeChange(pageNum) {
            this.pageData.pageNum = pageNum;
            this.getViewInfo();
        },
        getViewInfo(item) {
            if (item) {
                this.searchItem = item;
            }
            this.dialogTableVisible = true
            let body = {
                "pageNum": 1,
                "pages": 1,
                "pageSize": 50,
                "pageOptionsList": [
                50,
                100,
                200
                ],
                "total": 0,
                "sortList": [],
                "filterList": [],
                "selectCustomerCode": "",
                "selectOutPlanOrderNum": "",
                "ccisPledgePlanId": item.id ? item.id : "", //报关申请id, 货转申请id
                "ccisSeparationPlanId": "", //分色申请id
                "searchOrderType": "",
                searchName: this.attachmentItem.searchKey
            }
            getFileList(body, this.wmsUrl).then(({data}) => {
                if (data.returnCode == 200) {
                    this.pageData.list = data.returnData.pageInfo.list
                    this.pageData.list.forEach(item => {
                        item.createdDate = this.$utils.timestampToDate(item.createdDate);
                    });
                }
            })
        },
        pageChange(pageNum) {
            this.tableData.pageNum = pageNum;
            this.getSelectList();
        },
        resetGet() {
            this.tableData.searchKey = '';
            this.tableData.applyStatus = [];
            this.getSelectList();
        },
        pageSizeChange(pageSize) {
            this.tableData.pageSize = pageSize;
            this.getSelectList();
        },
        wareAllCheck() {
            this.wareAllChecked = !this.wareAllChecked;
        },
        inPlanInfoD(item){
            item.dtailInfo = !item.dtailInfo;
        },
        computedBusinessName(row, prop){
            if(row){
                if(row.completeProportion){
                    return prop + '-' + row.completeProportion
                }else{
                    return prop
                }
            }else{
                return prop
            }
        },
        matClick(item) {
            this.tableData.searchKey = '',
            this.tableData.applyStatus = []
            this.planStatus = item;
            if (this.planStatus == 1) {
                this.applyTypeList = ['in', 'move']
                this.getSelectList();
            } else if (this.planStatus == 2) {
                this.applyTypeList = ['out']
                this.getSelectList();
            }
        },
        lookInfo(item) {
            if (this.planStatus == 1) {
                this.$router.push({
                    name: 'planInfo',
                    query: {
                        planNum: this.planStatus == 1 ? 1 : 2,
                    },
                    params: {
                        planOrderNumList: item.planOrderNumList,
                        menuActiveName: 36
                    }
                })
            } else if (this.planStatus == 2) {
                this.$router.push({
                    name: 'planInfo',
                    query: {
                        planNum: 2
                    },
                    params: {
                        planOrderNumList: item.planOrderNumList,
                        menuActiveName: 36
                    }
                })
            }
        },
        // 新增保税报关计划
        AddBondedWarehousingInfo() {
            this.$router.push({
                name: 'bondedWarehousingInfo',
                query: {
                    planStatus: this.planStatus,
                    wmsUrl: JSON.stringify(this.wmsUrl),
                    whId: 36
                }
            })
        },
        // 获取所有的信息
        getAllWare() {
            getAllWareList().then(({data}) => {
                if (data.returnCode == 200) {
                    data.returnData.forEach(item => {
                      if (item.id === 36) {
                        this.wmsUrl = item.ipProt;
                      }
                    });
                    // this.wmsUrl = 'http://172.16.0.122:8088'
                    // this.wmsUrl = 'http://172.16.0.206:8088'
                    this.selectByCustomerTypeList();
                    this.getByCodeTableType();
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err =>{
                    this.$Message.error(err);
            });
        },
        getSelectList() {
            this.$nextTick(() => {
                console.log(this.searchManageCompanyCode);
                let body = {
                    "pageNum": this.tableData.pageNum,
                    "pageSize": this.tableData.pageSize,
                    "pageOptionsList": [
                        50,
                        100,
                        200
                    ],
                    "filterList": [
                        {
                            'filterKey': 'ccis',
                            'filterValue': 'ccis',
                        },
                        {
                            'filterKey': "ownerCode",
                            'filterValue': this.searchManageCompanyCode
                        },
                        {
                            'filterKey': 'cargoOwner',
                            'filterValue': this.searchManageCompanyCode
                        }
                    ],
                    "sortList": [],
                    "ownerCodeList": [],
                    "searchKey": this.tableData.searchKey, //查询提单号，箱号，关联报关单编号，提发货凭证编号
                    "applyStatus": this.tableData.applyStatus, //申请状态
                    applyTypeList: this.applyTypeList
                }
                selectList(body, this.wmsUrl).then(({data}) => {
                    this.wareSelected = [{
                        boxNum: '',
                        id: 36
                    }]
                    if (data.returnCode == 200) {
                        this.fileNumList = [];
                        data.returnData.pageInfo.list.forEach(item => {
                            this.fileNumList.push(item.fileNum)
                        });
                        this.tableData.list = _.cloneDeep(data.returnData.pageInfo.list);
                        this.tableData.total = data.returnData.pageInfo.total;
                        body['applyType'] = 'customs';
                        body.pageSize = ''
                        selectBoxNumPage(body, this.wmsUrl).then(({data}) => {
                            data.returnData['id'] = 36
                            this.menuActiveName = 36;
                            this.wareSelected = [{
                                boxNum: '',
                                id: 36
                            }]
                            this.wareSelected[0].boxNum = data.returnData.boxNum;
                        });
                        this.tableData.list.forEach(item => {
                            this.$set(item,'dtailInfo',false);
                            item.businessDetailList.forEach(x => {
                                this.$set(x, 'dtailInfoGoods', false)
                            });
                            item.businessDetailList.forEach(x => {
                                this.tradeCurrList.forEach(t => {
                                    if (x.dclCurrcd == t.code) {
                                        x.dclCurrcd = t.codeName;
                                    }
                                })
                            })
                            this.customCodeList.forEach(t => {
                                    if (item.impexpPortcd == t.code) {
                                        item['impexpPortcdName'] = t.codeName;
                                    }
                                })
                                this.disrictCodeList.forEach(t => {
                                    if (item.districtCode == t.code) {
                                        item['districtCodeName'] = t.codeName;
                                    }
                                })
                            item.matCodeDetailList.forEach(x => {
                                this.unitList.forEach(t => {
                                    if (x.dclUnitcd == t.code) {
                                        x['dclUnitcdName'] = t.codeName;
                                    }
                                })
                                this.unitList.forEach(t => {
                                    if (x.legalDclUnitcd == t.code) {
                                        x['legalDclUnitcdName'] = t.codeName;
                                    }
                                })
                                this.countryCodeList.forEach(t => {
                                    if (x.country == t.code) {
                                        x['countryName'] = t.codeName;
                                    }
                                })
                            });
                        })
                        this.tableData.loading = false;
                    } else {
                        this.$Message.error(data.returnMsg);
                    }
                })
                getCustomsStatisticData(this.searchManageCompanyCode, this.wmsUrl).then(({data}) => {
                    this.CustomsStatisticDataList = data.returnData
                })
            })
        },
        // 获取码表
        getByCodeTableType() {
            getByCodeTableTypeList(this.wmsUrl).then(({data}) => {
                this.tradeCurrList = data.returnData.filter(item => {
                    return item.codeTableType == 'TRADE_CURR'
                })
                this.unitList = data.returnData.filter(item => {
                    return item.codeTableType == 'UNIT'
                })
                this.countryCodeList = data.returnData.filter(item => {
                    return item.codeTableType == 'COUNTRY_CODE'
                })
                this.customCodeList = data.returnData.filter(item => {
                    return item.codeTableType == 'CUSTOM_CODE'
                })
                this.disrictCodeList = data.returnData.filter(item => {
                    return item.codeTableType == 'DISTRICT_CODE'
                })
                this.getSelectList();
            });
        },
        EditInfo(item){
            this.$router.push({
                name: 'bondedWarehousingInfo',
                query: {
                    wmsUrl: JSON.stringify(this.wmsUrl),
                    edit: true,
                    id: item.id,
                    item: JSON.stringify(item),
                    whId: 36
                }
            })
        },
        submitInfo(item) {
            let body = {
                id: item.id,
                applyStatus: 1,
                refuseRemark: '',
            }
            body['operator'] = this.$utils.getUserInfo().realName,
            updateApplyStatus(body, this.wmsUrl).then(({data}) => {
                if (data.returnCode == 200) {
                    this.$Message.success('操作成功');
                    this.getSelectList();
                } else {
                    this.$Message.error(data.returnMsg);
                }
            })
        },
        delectInfo(item) {
            deleteById({id: item.id}, this.wmsUrl).then(({data}) => {
                if (data.returnCode == 200) {
                    this.$Message.success('操作成功');
                    this.getSelectList();
                } else {
                    this.$Message.error(data.returnMsg);
                }
            })
        },
        selectByCustomerTypeList() {
            let body = {
                customerProperty: 'h'
            }
            selectByCustomerType(body, this.wmsUrl).then(({data}) => {
                this.customerTypeList = data.returnData
                // this.customerTypeList.forEach(item => {
                //     if (item.customerName == this.$utils.getUserInfo().entrustingPartyName) {
                //         this.searchOwnerCode = item.customerCode;
                //     }
                // })
                this.customerTypeList.forEach(item => {
                    if (item.customerName == this.$utils.getUserInfo().entrustingPartyName) {
                        this.searchManageCompanyCode = item.customerCode;
                    }
                })
            })
        }
    },
    mounted() {
        this.tableData.loading = true;
        this.getAllWare();
    }
}
</script>

<style lang="less">
.colorInfo{
    color:#4F68E8;
    // &:hover {
    //     color:#6b6c6f
    // }
}
.font-bold {
    font-weight: 700;
}
.font-lolds {
    font-weight: 700;
    z-index: 13;
}
.search-container {
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid rgba(217, 217, 217, 1);

    .warehouse, .stock {
        padding: 0 50px;
        .title {
            color: rgba(0, 0, 0, 0.85);
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 12px;
        }
    }
    .warehouse {
        padding-top: 30px;
    }
    .stock {
        padding-bottom: 30px;
    }

    .warehouse-item {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 270px;
        height: 70px;
        border-radius: 4px;
        border: 1px solid rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
        padding: 10px 20px;
        color: rgba(0, 0, 0, 0.85);
        margin-right: 10px;
        transition: all .5s;

        &:hover {
            .warehouse-item__checked {
                border: 1px solid rgba(79, 104, 232, 1);
                background-color: rgba(79, 104, 232, 0.1);
            }

            .warehouse-item__not-checked {
                border: 1px solid rgba(217, 217, 217, 1);
                background-color: rgba(255, 255, 255, 1);
            }
        }
    }
    .warehouse-item__checked {
        border: 1px solid rgba(79, 104, 232, 1);
        background-color: rgba(79, 104, 232, 0.1);
    }
    .warehouse-item__not-checked {
        border: 1px solid rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
    }

    .bottom-btn, .bottom-btn2 {
        cursor: pointer;
        width: 50px;
        height: 0;
        display: block;
        position: absolute;
        left: 50%;
        bottom: -20px;
        border-top: 20px solid #fff;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        text-align: center;
        z-index: 100;
        transition: all .3s;
        font-size: 20px!important;

        &:hover  {
            transform: scale(1.2) translateY(1px);
        }
        &:hover+.bottom-btn2  {
            transform: scale(1.2) translateY(2px);
        }

        .ios-menu {
            position: absolute;
            top: -20px;
            right: 4px;
            transition: all .3s;
        }
    }
    .bottom-btn2 {
        width: 52px;
        bottom: -21px;
        border-top: 21px solid rgba(217, 217, 217, 1);
        z-index: 90;
    }
}

.content-container {
    margin-top: 10px;

    .ivu-menu-horizontal.ivu-menu-light:after {
        background: rgba(255, 255, 255, 0);
    }
    .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover {
        border-bottom: 4px solid rgba(79, 104, 232, 1) !important;
    }

    .nav-tab {
        background-color: #fff;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 30px;
    }

    .operation {
        padding: 20px 50px 10px;
    }

    .content {
        padding: 10px 30px;
    }
    .activeClass{
        border: 1px solid rgba(79, 104, 232, 1);
        background-color: rgba(79, 104, 232, 0.1);
    }
}
</style>
